<!DOCTYPE html>
<html>
<head>
	<title>零基础HTML及CSS编码（二）</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="./Css3.css">
</head>
<body>
<header class="header">
	<a href="http://www.baidu.com">
		<img class="headerlogo" src="http://i.imgur.com/eKrn8iC.jpg" alt="首页logo" title="首页logo">
	</a>
	<nav class="nav">
		<ul>
			<li class="lists"><a href="#">导航链接一</a></li>
			<li class="lists"><a href="#">导航链接二</a></li>
			<li class="lists"><a href="#">导航链接三</a></li>
			<li class="lists"><a href="#">导航链接四</a></li>
		</ul>
	</nav>
</header>
	<article class="article">
		<h2>孔乙己（一）</h2>
		<h3>文章的开头</h3>
		<p>
			<span>鲁迅</span>
			<time>2016年4月19日17:03:18</time>
		</p>
		<p class="text">鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，<a href="http://www.baidu.com">热热的喝了休息</a> ；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮⑴，大抵没有这样阔绰⑵。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。<br />我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重监督下，羼⑶水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头⑷的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>
		<img src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		<p class="text">我从此便整天的站在柜台里，专管我的职务。虽然没有什么失职，但总觉得有些单调，有些无聊。掌柜是一副凶脸孔，主顾也没有好声气⑸，教人活泼不得；只有孔乙己到店，才可以笑几声，所以至今还记得。<br />孔乙己是站着喝酒而穿长衫的唯一的人。他身材很高大；青白脸色，皱纹间时常夹些伤痕；一部乱蓬蓬的花白的胡子。<a href="http://www.baidu.com">穿的虽然是长衫</a> ，可是又脏又破，似乎十多年没有补，也没有洗。他对人说话，总是满口之乎者也⑹，教人半懂不懂的。因为他姓孔，别人便从描红纸上的“上大人孔乙己⑺”这半懂不懂的话里，替他取下一个绰号，叫作孔乙己。孔乙己一到店，所有喝酒的人便都看着他笑，有的叫道，“孔乙己，你脸上又添上新伤疤了！”他不回答，对柜里说，“温两碗酒，要一碟茴香豆。”便排出九文大钱。他们又故意的高声嚷道，“你一定又偷了人家的东西了！”孔乙己睁大眼睛说，“你怎么这样凭空污人清白……”“什么清白？我前天亲眼见你偷了何家的书，吊着打。”孔乙己便涨红了脸，额上的青筋条条绽出，争辩道，“窃书不能算偷……窃书！……读书人的事，能算偷么？”接连便是难懂的话，什么“君子固穷⑻”，什么“者乎”之类，引得众人都哄笑起来：店内外充满了快活的空气。</p>
	</article>
	<article class="article">
		<h2>孔乙己（二）</h2>
		<h3>文章的经过</h3>
		<p>
			<span>鲁迅</span>
			<time>2016年4月19日17:17:09</time>
		</p>
		<p class="text">听人家背地里谈论，孔乙己原来也读过书，但终于没有进学⑼，又不会营生⑽；于是愈过愈穷，弄到将要讨饭了。幸而写得一笔好字，便替人家钞⑾钞书，换一碗饭吃。可惜他又有一样坏脾气，便是好喝懒做。坐不到几天，便连人和书籍纸张笔砚，一齐失踪。如是几次，叫他抄书的人也没有了。孔乙己没有法，便免不了偶然做些偷窃的事。但他在我们店里，品行却比别人都好，就是从不拖欠；虽然间或没有现钱，暂时记在粉板上，但不出一月，定然还清，从粉板上拭去了孔乙己的名字。<br />孔乙己喝过半碗酒，涨红的脸色渐渐复了原，旁人便又问道，“孔乙己，你当真认识字么？”孔乙己看着问他的人，显出不屑置辩的神气。他们便接着说道，“你怎的连半个秀才也捞不到呢？”孔乙己立刻显出颓唐不安模样，脸上笼上了一层灰色，嘴里说些话；这回可是全是之乎者也之类，一些不懂了。在这时候，众人也都哄笑起来：店内外充满了快活的空气。</p>
		<img src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		<div class="list_min min"><ol>
			<li>项目列表一</li>
			<li>项目列表二</li>
			<li>项目列表三</li>
		</ol></div>
	</article>
	<article class="article">
		<h2>图片</h2>
		<figure class="picture_box"><!-- 规定独立的流内容（图像、图表、照片、代码等等）。 -->
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
		<figure class="picture_box">
			<figcaption>文章配图</figcaption>
			<img class="picture" src="http://i.imgur.com/eKrn8iC.jpg" alt="文章配图">
		</figure>
	</article>
	<article class="article">
		<h2>孔乙己（三）</h2>
		<h3>文章的结局</h3>
		<p>
			<span>鲁迅</span>
			<time>2016年4月20日16:23:15</time>
		</p>
		<div class="list_min max"><ol>
			<li>项目列表一</li>
			<li>项目列表二</li>
			<li>项目列表三</li>
		</ol></div>
		<table><tbody>
			<tr class="table_tr">
				<th>表头</th>
    			<th>表头</th>
    			<th>表头</th>
			</tr>
			<tr>
				<td>单元格1</td>
    			<td>单元格2</td>
    			<td><a href="#">操作</a></td>
			</tr>
			<tr>
				<td>单元格1</td>
    			<td>单元格2</td>
    			<td><a href="#">操作</a></td>
			</tr>
			<tr>
				<td>单元格1</td>
    			<td>单元格2</td>
    			<td><a href="#">操作</a></td>
			</tr>
			<tr>
				<td>单元格1</td>
    			<td>单元格2</td>
    			<td><a href="#">操作</a></td>
			</tr>
			<tr style="background: #ccc;">
				<td>总计</td>
				<td colspan="2">1000</td><!-- 合并单元格 -->
			</tr>
		</tbody></table>
	</article>


<aside>
	<h3 class="sidebar">侧边栏</h3>
	<form action="" method="post">
		<div>
			<div class="inputleft">请输入邮箱地址</div>
			<input type="email" placeholder="请输入邮箱地址"></input>
		</div>
		<div class="tips">邮箱地址请按格式输入</div>
		<div>
			<div class="inputleft">请输入密码</div>
			<input type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="请输入密码"></input>
		</div>
		<div>
			<div class="inputleft">请重复输入密码</div>
			<input type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="请重复输入密码"></input>
		</div>
		<div class="tips">密码请为6-16位英文数字</div>
		<div>
			<div class="inputleft">性别</div>
			<input type="radio" id="man" name="sex" checked="checked"></input>
			<label for="man">男</label>
			<input type="radio" id="woman" name="sex"></input>
			<label for="woman">女</label>
		</div>
		<div>
			<div class="inputleft">城市</div>
			<select>
				<option value="BJ">北京</option>
				<option value="SH" selected="selected">上海</option>
				<option value="GZ">广州</option>
				<option value="SZ">深圳</option>
			</select>
		</div>
		<div>
			<div class="inputleft">爱好</div>
			<input type="checkbox" id="sprot" checked="checked"></input>
			<label for="sprot">运动</label>
			<input type="checkbox" id="art"></input>
			<label for="art">艺术</label>
			<input type="checkbox" id="science"></input>
			<label for="science">科学</label>
		</div>
		<div>
			<div class="inputleft">个人描述</div>
			<textarea placeholder="请输入个人描述···"></textarea>
		</div>
		<!-- <div> -->
			<input class="submit" type="submit" value="确认提交"></input>
		<!-- </div> -->
	</form>
</aside>
<footer>
	<span>usercao&nbsp版权所有&copy</span>
</footer>
</body>
</html>